<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/backend/plugins/element-ui/index.css"/>
  <style>
      .el-input {
          width: 300px;
      }
  </style>
</head>
<body>
<div id="app" style="margin: 50px 50px">
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
    <el-form-item
            prop="username"
            label="用户名"
    >
      <el-input v-model="dynamicValidateForm.username"></el-input>
    </el-form-item>
    <el-form-item
            prop="password"
            label="密码"
    >
      <el-input v-model="dynamicValidateForm.password"></el-input>
    </el-form-item>
    <el-form-item
            prop="phone"
            label="手机号"
    >
      <el-input v-model="dynamicValidateForm.phone"></el-input>
    </el-form-item>
    <el-form-item
            v-for="(address ,index) in addresses"
            :label="'收货地址' + index"
            :key="address.key"
            :prop="'addresss.' + index + '.value'"
            :rules="{
      required: true, message: '收货地址不能为空', trigger: 'blur'
    }"
    >
      <el-input v-model="address.value"></el-input>
      <el-button @click.prevent="removeAddress(address)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
      <el-button @click="addAddress">新增收货地址</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script src="/backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script src="/backend/api/user.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                page: window.localStorage.getItem('page'),
                pageSize: window.localStorage.getItem('pageSize'),
                labelPosition: 'right',
                dynamicValidateForm: {
                    username: '',
                    password: '',
                    phone: '',
                },
                addresses: [],
                nowStatus: '',
                key: 0,
            };
        },
        mounted: function () {
            this.init()
        },
        methods: {
            submitForm(formName) {
                let params = {
                    user: this.dynamicValidateForm,
                    page: this.page,
                    pageSize: this.pageSize,
                    addresses: this.addresses
                }
                if (this.nowStatus === 0) {
                    addUser(params).then(res => {
                        if (res.code === 1) {
                            this.$message.success('用户添加成功！')
                            window.location.href = '/backend/pages/user/list.html'
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                } else {
                    editUser(params).then(res => {
                        if (res.code === 1) {
                            this.$message.success('用户修改成功！')
                            window.location.href = '/backend/pages/user/list.html'
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }
            },
            removeAddress(item) {
                var index = this.addresses.indexOf(item)
                if (index !== -1) {
                    this.addresses.splice(index, 1)
                }
            },
            addAddress() {
                this.addresses.push({
                    value: '',
                    key: Date.now()
                });
            },
            async init() {
                let str = location.href;
                //查找关键字
                let l = str.indexOf('=');
                if (l !== -1) {
                    this.nowStatus = 1
                    let r = str.length
                    //取两者之间的字符串截取
                    this.id = str.substr(l + 1, r - l - 1)
                    await queryUserById(this.id).then(res => {
                        if (String(res.code) === '1') {
                            queryAddressByUserId(this.id).then(res => {
                                if (String(res.code) === '1') {
                                    const addressArray = res.data;
                                    this.addresses = addressArray.map(address => {
                                        const [key, value] = [this.key, address];
                                        this.key++;
                                        return {key, value};
                                    });
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                            this.dynamicValidateForm = res.data
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                } else {
                    this.nowStatus = 0
                }
            }
        }
    })

</script>
</html>